<template>
  <div class="order-item">
    <div class="header">
      <div class="left">
        <div style="display: inline">
          <el-tag
            type="untreated"
            effect="dark"
            class="order-status-tag"
          >
            未处理
          </el-tag>
        </div>
        <div class="order-no">
          #200959851041 丨2022-6-22 12:02
        </div>
      </div>
      <div class="right">
        <div class="buyer">
          <img class="img-country-icon" :src="getCountryIcon('cn')" alt="">
          Luis Miguel Vargas Salinas
        </div>
      </div>
    </div>
    <div class="content">
      <div class="item">
        <div
          class="label expand "
          :class="{'expand--active':isExpand}"
        >
          <i class="el-icon-arrow-right" @click="expand($event)"></i>
        </div>
        <div class="label img">
          <img src="https://files.axshare.com/gsc/FRK8HN/76/e4/3f/76e43f4f70f34adeb93c05aa53ba059e/images/%E8%AE%A2%E5%8D%95%E5%88%97%E8%A1%A8/u56.svg?pageId=f2b1cdcc-633c-48fd-a6bc-9b125c1420db" alt="" style="width: 80px">
        </div>
        <div class="label goods-info">
          <p class="listing">MLM5567788889</p>
          <p class="title hidden-1">
            商品标题、Listing标题、1行，太长省略……
            商品标题、Listing标题、1行，太长省略……
            商品标题、Listing标题、1行，太长省略……
            商品标题、Listing标题、1行，太长省略……
          </p>
          <p class="skuId">
            SKU：MHH-067-1
          </p>
          <p class="sku">
            Color: Black | Size: S
          </p>
        </div>
        <div class="label price center">
          <p class="price-usd">
            <span class="currency">USD</span>
            <span class="price-num"> 3336</span>
          </p>
          <p class="price-mxn">
            <span class="currency"> MXN</span>
            <span class="price-num"> 336</span>
          </p>
        </div>
        <div class="label num center">
          <p>
            <span class="text">数量：</span>
            <span class="number">3</span>
          </p>
        </div>
        <div class="label operate">
          <el-button size="small" type="danger" >传快递单</el-button>
          <el-button size="small" type="success">用库存</el-button>
          <ignore-order></ignore-order>
        </div>
      </div>

      <div class="item">
        <div class="cell expand"> > </div>
        <div class="cell img">
          <img src="https://files.axshare.com/gsc/FRK8HN/76/e4/3f/76e43f4f70f34adeb93c05aa53ba059e/images/%E8%AE%A2%E5%8D%95%E5%88%97%E8%A1%A8/u56.svg?pageId=f2b1cdcc-633c-48fd-a6bc-9b125c1420db" alt="" style="width: 80px">
        </div>
        <div class="cell goods-info">
          <p class="listing">MLM5567788889</p>
          <p class="title hidden-1">
            商品标题、Listing标题、1行，太长省略……
          </p>
          <p class="skuId">
            SKU：MHH-067-1
          </p>
          <p class="sku">
            Color: Black | Size: S
          </p>
        </div>
        <div class="cell price center">
          <p class="price-usd">
            <span class="currency">USD</span>
            <span class="price-num">3336</span>
          </p>
          <p class="price-mxn">
            <span class="currency"> MXN</span>
            <span class="price-num"> 336</span>
          </p>
        </div>
        <div class="cell num center">
          <p>数量：3</p>
        </div>
        <div class="cell operate">

        </div>
      </div>

    </div>

  </div>
</template>

<script>

import {getCountryIcon} from "@/utils/common";
import ignoreOrder from "@/views/order/components/IgnoreOrder";

export default {
  name: "OrderItem",
  components:{
    ignoreOrder,
  },
  data(){
    return {
      getCountryIcon,
      isExpand: false,

    }
  },
  methods:{
    expand(e){
      this.isExpand = !this.isExpand;
    }
  }
}
</script>

<style scoped lang="scss">
.order-item{
  padding: 10px 10px;
  border: 1px solid #d7d7d7;
  .header{
    font-size: 13px;

    display: flex;
    justify-content: space-between;
    .order-no{
      display: inline-block;
      font-weight: bold;
      margin-left: 20px;
    }
  }
}
.order-status-tag{
  font-weight: bold;
}
.content{
  .item{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
    display: flex;
    margin: 5px 0;
    .expand{
      position: relative;
      color: #666;
      font-size: 12px;
      width: 20px;
      height: 20px;
      text-align: center;
      margin-right: 3px;
      top: 32px;
      cursor: pointer;
    }
    .expand--active{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      left: -2px;
    }
    .img{
      width: 100px;
      height: 100px;
    }
    .center{
      text-align: center;
    }
    .goods-info{
      line-height: 20px;
      width: 50%;

      .listing{
        font-weight: 650;
        font-size: 13px;
        color: #555555;
      }
      .title{
        font-weight: 500;
        color: #AAAAAA;
      }
      .skuId{
        font-weight: 500;
        color: #555555;
      }
      .sku{
        font-weight: 400;
        color: #7F7F7F;
      }
    }
    .price{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 500;
      p{
        margin: 5px auto;
      }
      .currency{
        color: #AAAAAA;
      }
      .price-num{
        color: #009C46;
      }
    }
    .num{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 600;
      .text{
        color: #AAAAAA;
      }
      .number{
        color: #FC6347;
      }
    }
    .operate{
      margin-left: auto;
      min-width: 300px;
      line-height: 100px;
    }
    .is-right{
      text-align: right;
    }
  }

}
</style>
